<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/regiset-agreement.css">
    <link rel="stylesheet" href="./css/jiazai.css">
    <title>注册</title>
    <style type="text/css">
    	.dis-start{
    		display: flex;
    		justify-content: flex-start;
    		align-items: center;
    	}
    	.input-par{
    		height: 25px;
    	}
		.input-par>div{
			
			
			padding-right: 20px;
			font-size: 15px;
			color: #8ba0c8;
			
			border-right: 1px solid #eee;
		}
		.input-par>div>span{
			max-width: 100px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.input-par>div>img{
			margin-left: 10px;
		}
		.input-par>input{
			flex: 1 1 0;
			width: 100%;
			padding-left: 10px;
			font-size: 16px;
			color: #999;
		}
		.input-par>input::-webkit-input-placeholder{
			font-size: 14px;
			color: #999;
		}
    </style>
</head>

<body>
    <div id='app'>
        <!-- 加载中动画 -->
        <div class='jiazai' v-if='jiazai'>
            <img src="./img/jia-ani.gif" width="50px" height="50px">
        </div>
        <!-- 加载中动画 -->
        <div id="hea-com">
            <div>
                <img @click='close' src="./img/right-black.svg" width="20px" height="20px">
                <span>注册</span>
            </div>
            <span @click='close'>
                登陆
            </span>
        </div>
        <div class='content'>
            <div class='input-wrap'>
            	<div class="dis-start input-par">
            		<div class="dis-start" @click="openMore">
            			<span>{{alCoun.country+' '+alCoun.areacode}}</span>
            			<img src="img/down.svg" style="width: 20px;height: 20px;"/>
            		</div>
            		<input type="number" placeholder="输入手机号码" v-model='phone' />
            	</div>
                <!--<div class='input'>
                    <img src="./img/login-phone.png" height="24px">
                    <span>+ 86</span>
                    <input type="text" v-model='phone'>
                </div>-->
                <!--offClose-->
                <img src="./img/close-input.svg" width="25px" height="25px" v-if='offClose' @click='phone=""'>
            </div>
            <p class='agreement'>
                <span>同意</span>
                <span @click='_openHref("user-agreement.html","userAgreement")'>《超级钱包用户协议》</span>
            </p>
            <button class='btn-sure' @click='next'>下一步</button>
        </div>
    </div>
    <script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/back.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.min.js"></script>
    <script>
    	//选择国家带回来
    	var country=function(val){
    		app.$data.alCoun=JSON.parse(val);
    	};
        var app = new Vue({
            el: '#app',
            data: {
                jiazai: false,
                //用户输入的手机号
                phone: '',
                //控制用户输入了手机号 直接清空自己的输入
                offClose: false,
                //国家区号
                country:[],
                //已经选择的地区
                alCoun:{"areacode":"+86","country":"中国大陆"},
            },
            watch: {
                phone: function(val) {
                    if (val.length != 0) {
                        this.offClose = true;
                    } else {
                        this.offClose = false;
                    }
                }
            },
            created:function(){
            	var This=this;
            	this.jiazai=true;
            	_post(GET_COUNTRY,{},function(data){
            		This.jiazai=false;
            		if(data.status==1){
            			This.country=data.back;
            		}else{
            			_toast('获取国际号码信息失败');
            		}
            	})
            },
            methods: {
                close: function() {
                    var web = plus.webview.currentWebview();
                    web.close('none');
                },
                //选择区
                openMore:function(){
                	var This=this;
					var curr = plus.webview.currentWebview();
					//打开输入密码页面
					var op = {
						'backButtonAutoControl': 'close', //返回是关闭当前页
						'height': '350px',
						'bottom': '0',
						'background': 'transparent'
					};
					var web = plus.webview.create('change-country.html', 'changeCountry', op);
					var self = this;
					web.addEventListener("loaded", function() {
						setTimeout(function(){
							web.evalJS("send('"+JSON.stringify(This.country)+"')");
							web.show('slide-in-bottom');
						},300);
						curr.setStyle({
							mask: 'rgba(0,0,0,0.5)'
						});
						curr.addEventListener('maskClick', function() {
							plus.webview.currentWebview().setStyle({
								mask: 'none'
							});
							web.close('none');
						}, false);
					}, false);
					web.onclose = function() {
						curr.setStyle({
							mask: 'none'
						});
					};
                },
                next: function() {
//                  if (!_checkMobile(this.phone)) {
//                      _toast('请输入正确的手机号');
//                      return;
//                  }
                    var This = this;
                    //发送验证码
                    this.jiazai = true;
                    _post(SEND_CODE, {
                        mobile: this.phone,
                        areacode:this.alCoun.areacode
                    }, function(data) {
                        This.jiazai = false;
                        if (data.status == 1) {
                            var web = _openHref('regiset-input-more.html', 'regisetInputMore');
                            setTimeout(function() {
                                web.evalJS("phone('" + This.phone + "','" + 1 + "','"+This.alCoun.areacode+"')");
                            }, 200);
                        } else {
                            _toast(data.msg);
                        }
                    });
                }
            }
        });
    </script>
</body>

</html>